<template>
  <q-page padding>
    <q-btn color="primary" label="确认" @click="search" />
    <div class="tw-flex tw-m-auto tw-h-screen" >
      <div class="tw-flex-none ">
        <div class="tw-text-2xl tw-mt-2">
          目标案例
        </div>
        <q-markup-table separator="cell" class="tw-mt-5 tw-h-full">
          <thead>
          <tr>
            <th class="text-left"></th>
            <th class="text-left">特征属性</th>
            <th class="text-left">数值</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">基础信息</td>
            <td class="text-left cell-left">干旱类型</td>
            <td class="text-left">
              <q-input v-model="type"/>
            </td>
          </tr>
          <tr>
            <td class="text-left ">开始时间</td>
            <td class="text-left">
              <q-input v-model="start"/>
            </td>

          </tr>
          <tr class="text-left">
            <td class="text-left">结束时间</td>
            <td class="text-left">
              <q-input v-model="end"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">发生省份</td>
            <td class="text-left">
              <q-input v-model="province"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">气象信息</td>
            <td class="text-left cell-left">降水量</td>
            <td class="text-left">
              <q-input v-model="rain"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">温度</td>
            <td class="text-left">
              <q-input v-model="temp"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">风速</td>
            <td class="text-left">
              <q-input v-model="wind"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">相对湿度</td>
            <td class="text-left">
              <q-input v-model="moist"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">干旱指标信息</td>
            <td class="text-left cell-left">SPI</td>
            <td class="text-left">
              <q-input v-model="SPI"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">MCI</td>
            <td class="text-left">
              <q-input v-model="MCI"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">干旱烈度</td>
            <td class="text-left">
              <q-input v-model="dry"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">社会经济信息</td>
            <td class="text-left cell-left">GDP</td>
            <td class="text-left">
              <q-input v-model="gdp"/>
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">人口</td>
            <td class="text-left">
              <q-input v-model="popular"/>
            </td>
          </tr>
          </tbody>
        </q-markup-table>
      </div>
      <q-separator class="tw-m-10" vertical/>
      <div v-if="vis" class="tw-flex-2 tw-w-full tw-h-screen">
        <div class="tw-text-2xl tw-mt-2">
          最相似案例
        </div>
        <q-markup-table separator="cell"  class="tw-mt-5 tw-h-full tw-w-full" >
          <thead>
          <tr>
            <th class="text-left"></th>
            <th class="text-left">特征属性</th>
            <th class="text-left">数值</th>
            <th class="text-left">备注</th>
          </tr>
          </thead>
          <tbody  >
          <tr>
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">基础信息</td>
            <td class="text-left cell-left">干旱类型</td>
            <td class="text-left">{{ result.type.value }}</td>
            <td class="text-left">
              {{ result.type.remark }}
            </td>
          </tr>
          <tr>
            <td class="text-left ">开始时间</td>
            <td class="text-left">{{ result.start.value }}</td>
            <td class="text-left">
              {{ result.start.remark }}
            </td>

          </tr>
          <tr class="text-left">
            <td class="text-left">结束时间</td>
            <td class="text-left">
              {{ result.end.value }}
            </td>
            <td class="text-left">
              {{ result.end.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">发生省份</td>
            <td class="text-left">
              {{ result.province.value }}
            </td>
            <td class="text-left">
              {{ result.province.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">气象信息</td>
            <td class="text-left cell-left">降水量</td>
            <td class="text-left">
              {{ result.rain.value }}
            </td>
            <td class="text-left">
              {{ result.rain.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">温度</td>
            <td class="text-left">
              {{ result.temp.value }}
            </td>
            <td class="text-left">
              {{ result.temp.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">风速</td>
            <td class="text-left">
              {{ result.wind.value }}
            </td>
            <td class="text-left">
              {{ result.wind.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">相对湿度</td>
            <td class="text-left">
              {{ result.moist.value }}
            </td>
            <td class="text-left">
              {{ result.moist.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">干旱指标信息</td>
            <td class="text-left cell-left">SPI</td>
            <td class="text-left">
              {{ result.SPI.value }}
            </td>
            <td class="text-left">
              {{ result.SPI.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">MCI</td>
            <td class="text-left">
              {{ result.MCI.value }}
            </td>
            <td class="text-left">
              {{ result.MCI.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">干旱烈度</td>
            <td class="text-left">
              {{ result.dry.value }}
            </td>
            <td class="text-left">
              {{ result.dry.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">社会经济信息</td>
            <td class="text-left cell-left">GDP</td>
            <td class="text-left">
              {{ result.gdp.value }}
            </td>
            <td class="text-left">
              {{ result.gdp.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">人口</td>
            <td class="text-left">
              {{ result.popular.value }}
            </td>
            <td class="text-left">
              {{ result.popular.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">灾情</td>
            <td class="text-left">
              {{ result.disaster.value }}
            </td>
            <td class="text-left tw-break-all  tw-whitespace-normal tw-break-words">
              {{ result.disaster.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left">应对措施</td>
            <td class="text-left">响应等级</td>
            <td class="text-left">
              {{ result.response.value }}
            </td>
            <td></td>
          </tr>
          <tr class="text-left">
            <td class="text-left"></td>
            <td class="text-left">投入资金</td>
            <td class="text-left">
              {{ result.money.value }}
            </td>
            <td class="text-left">
              {{ result.money.remark }}
            </td>
          </tr>
          <tr class="text-left">
            <td class="text-left"></td>
            <td class="text-left">案例相似度 </td>
            <td class="text-left">
              {{ result.similarity.value }}
            </td>
            <td class="text-left">
              {{ result.similarity.remark }}
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div ref="radar" style="height: 300px" id="radar">

              </div>
            </td>
          </tr>
          </tbody>
        </q-markup-table>
      </div>
    </div>
  </q-page>
</template>

<script setup>

import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import { api } from "src/boot/api";

onMounted(()=>{
})

let confirm = ()=>{
  setTimeout(()=>{
    vis.value = true

  },2000)
}
let vis = ref(false)
let radar = ref()




let type = ref(1234)
let start = ref("2019-04-23")
let end = ref("2019-07-16")
let province = ref("云南")
let rain = ref(4.1)
let temp = ref(19.22)
let wind = ref(2.51)
let moist = ref(68.61)
let SPI = ref(-1.21)
let MCI = ref(-1.33)
let dry = ref(11.02)
let gdp = ref(2.3)
let popular = ref(48.58)

let result = ref({
  type:{
    value:1234,
    remark:"1.气象干旱"
  },
  start:{
    value:"2019-04-23",
    remark:"1.气象干旱"
  },
  end:{
    value:"2019-07-16",
    remark:"1.气象干旱"
  },
  province:{
    value:"云南",
    remark:"1.气象干旱"
  },
  rain:{
    value:4.1,
    remark:"1.气象干旱"
  },
  temp:{
    value:19.22,
    remark:"1.气象干旱"
  },
  wind:{
    value:2.51,
    remark:"1.气象干旱"
  },
  moist:{
    value:68.61,
    remark:"1.气象干旱"
  },
  SPI:{
    value:-1.21,
    remark:"1.气象干旱"
  },
  MCI:{
    value:-1.33,
    remark:"1.气象干旱"
  },
  dry:{
    value:11.02,
    remark:"1.气象干旱"
  },
  gdp:{
    value:2.3,
    remark:"1.气象干旱"
  },
  popular:{
    value:48.58,
    remark:"1.气象干旱"
  },
  disaster:{
    value:3,
    remark:"1.气象干旱"
  },
  money:{
    value:0.34,
    remark:"1.气象干旱"
  },
  similarity:{
    value:75.7,
    remark:"1.气象干旱"
  },
  response:{
    value:3,
    remark:"1.气象干旱"
  },
  sim:{
    target:[0.8, 0.3, 0.2, 0.5, 0.5, 0.1],
    similar:[0.5, 0.4, 0.8, 0.6, 0.2, 0.1]
  }

})
function render() {
  let data = result.value.sim
  let myChart = echarts.init(document.getElementById('radar'));
  let option = {
    title: {
      text: '目标案例与最相似案例对比图'

    },
    legend: {
      data: ['目标案例', '最相似案例'],
      left: "center",
    },
    radar: {
      shape: 'circle',
      indicator: [
        {name: '干旱烈度', max: 1},
        {name: 'gdp', max: 1},
        {name: '人口', max: 1},
        {name: 'MCI', max: 1},
        {name: '平均降水', max: 1},
        {name: '平均温度', max: 1},
        {name: '相对湿度', max: 1},
        {name: '风速', max: 1},
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: data.target,
            name: '目标案例'
          },
          {
            value: data.similar,
            name: '最相似案例'
          }
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}
watch(radar,(old,newVal)=>{
  if(old){
    render()
  }
  if(newVal){
    render()
  }
})

let search = ()=>{
  let formData = new FormData()
  formData.append("type",type.value)
  formData.append("start",start.value)
  formData.append("end",end.value)
  formData.append("province",province.value)
  formData.append("rain",rain.value)
  formData.append("temp",temp.value)
  formData.append("wind",wind.value)
  formData.append("moist",moist.value)
  formData.append("SPI",SPI.value)
  formData.append("MCI",MCI.value)
  formData.append("dry",dry.value)
  formData.append("gdp",gdp.value)
  formData.append("popular",popular.value)
  api({
    method:"post",
    url:"/sim",
    data:formData
  }).then(res=>{
    result.value = res.data.data
    
  })
  vis.value = true

}

</script>
